<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="misapplication-tap-highlight" content="no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <title>HTML5+ Runtime</title>
    <script type="text/javascript" src="js/update.js"></script>
    <script type="text/javascript" charset="utf-8">
      //取消浏览器的所有事件，使得active的样式在手机上正常生效
      document.addEventListener('touchstart', function() {
        return false;
      }, true);
      // 禁止选择
      document.oncontextmenu = function() {
        return false;
      };
      // var count=0
      
      
      
      // H5 plus事件处理
      function plusReady() {
        // Android处理返回键
        plus.key.addEventListener('backbutton', function() {
          ('iOS' == plus.os.name) ? plus.nativeUI.confirm('确认退出？', function(e) {
            if (e.index > 0) {
              plus.runtime.quit();
            }
          }, 'HelloH5', ['取消', '确定']): (confirm('确认退出？') && plus.runtime.quit());
        }, false);
        // 关闭启动界面
        // plus.navigator.setStatusBarBackground('#D74B28');
        setTimeout(function() {
          plus.navigator.closeSplashscreen();
        }, 200);
      }
      if (window.plus) {
        plusReady();
      } else {
        document.addEventListener('plusready', plusReady, false);
      }
      // 处理点击事件
      var _openw = null;
      var as = 'pop-in'; // 默认窗口动画
      /**
       * 打开新窗口
       * @param {String} id	加载的页面地址，也用作窗口标识
       * @param {String} t    页面的标题
       * @param {String} d	文档页面文件名称（doc目录下），不传入则使用页面的标题
       */
      function clicked(id, t, c) {
        // count=count+1
      
        if (_openw) {
          return;
        } // 防止快速点击
        
        // if(count!==1){
        //   return
        // }else{
          var loader = document.createElement('div');
          loader.classList.add('loader');
          var loaderBox = document.getElementById('loaderBox');
          loaderBox.appendChild(loader);
          loaderBox.style.background='#11111155';
          
          var ws = {
            scrollIndicator: 'none',
            scalable: false,
            popGesture: 'close',
            backButtonAutoControl: 'close',
            titleNView: {
              autoBackButton: true,
              backgroundColor:c,
              titleColor: '#fff'
            }
          };
          t && (ws.titleNView.titleText = t);
          
          _openw = plus.webview.create(id, id, ws);
          _openw.addEventListener('loaded', function() { //页面加载完成后才显示
           if (loader) {
              loader.remove();
            }
            loaderBox.style.background=""
            // count=0
            
            _openw && _openw.show(as, null, function() {
              _openw = null; //避免快速点击打开多个页面
            });
          }, false);
          _openw.addEventListener('hide', function() {
            _openw = null;
          }, false);
          _openw.addEventListener('close', function() { //页面关闭后可再次打开
            _openw = null;
          }, false);
        }
        
      // }
    </script>
    <link rel="stylesheet" href="css/common.css" type="text/css" charset="utf-8" />
    <style type="text/css">
      li {
        padding: 0.8em;
        border-bottom: 1px solid #ffffff55;
        background-color: #ffffff33;
      }

      li:active {
        background: #f4f4f4;
      }

      .item {
        display: block;
        background: no-repeat right center url();
        background-size: 24px 24px;
        -ms-touch-action: auto;
      }

      .body {
       background-image: url('./bg.jpg');
       background-size:100%;
       background-repeat: round;
      }
      
      .loaderBox{
        width: 100%;
        height: 100%;
      }
      .loader {
      border: 4px solid #f3f3f3; /* 设置边框样式 */
      border-top: 4px solid #3498db; /* 设置上边框样式 */
      border-radius: 50%; /* 设置边框为圆形 */
      width: 20px; /* 设置宽度 */
      height: 20px; /* 设置高度 */
      animation: spin 2s linear infinite; /* 应用旋转动画 */
      position: absolute;
      top: 30%;
      left:calc(50% - 20px);
      }
      
      @keyframes spin {
      0% { transform: rotate(0deg); } /* 起始角度为0度 */
      100% { transform: rotate(360deg); } /* 终止角度为360度，即一圈 */
      }
      
    </style>
  </head>
  <body onselectstart="return false;" class="body" id='body'>
    <div id="loaderBox" class="loaderBox">
    <ul id="plist" style="list-style:none;margin:0;padding:0;text-align:left;">
  
      <li id="wy" onclick="clicked('https:\/\/wenyaai.com/conversation/1', '问鸭','#605d58')">
        <span class="item" style="color: #605d58">XX、问鸭</span>
      </li> 
      <li id="crous" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/NqeqwfhYjixxQykWRIDc3wSYngh', '课程表','#605d58')">
        <span class="item" style="color: #605d58">XX、课程表</span>
      </li> 
      
      
      <li id="0" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/VOFFwoYfKiVAbKkI2T9cVQETnYd', '操作系统','#5b90b5')">
        <span class="item" style="color: #0000ff">操作系统</span>
      </li>  
      <li id="1" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/BCMJwj0KUi78Qsk7LiYczmGsn2f', '第一章','#ff9797')">
        <span class="item" style="color: #ff2e4d">第一章</span>
      </li> 
      <li id="2" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/BFdSwg4d1ieHnhkZ3yzcL0DvnSf', '第二章','#da9c52')">
        <span class="item" style="color: darkorange">第二章</span>
      </li>
      <li id="3" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/Q0u9wAIuRi40rfkc5PJcogTInTh', '第三章','#ffebad')">
        <span class="item" style="color: #ffff00">第三章</span>
      </li> 
      <li id="4" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/Haj2wxwP3iJQZCkd8XTca8YXnBb', '第四章','#c3d4ae')">
        <span class="item" style="color: lawngreen">第四章</span>
      </li> 
       <li id="5" onclick="clicked('https:\/\/lxbzsokttul.feishu.cn/wiki/Z2NmwYl99iOzDbksiR7csCnMnvf', '第五章','#ca5599')">
        <span class="item" style="color: #ff00ff">第五章</span>
      </li> 
      
    </ul>
    </div>
    
  </body>
  <script type="text/javascript" src="js/shortcut.js"></script>
</html>